<template>
  <div class="my-div">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <div class="list">
      <van-cell-group>
        <div class="list-header">房源信息</div>
        <van-cell
          title="小区名称"
          is-link
          value="请输入小区名称"
          to="/searchxq"
        />
        <van-field label="租金" placeholder="请输入租金/月">
        <template #extra>
          <span>￥/月</span>
        </template>
        </van-field>
        <van-field label="建筑面积" placeholder="请输入建筑面积">
          <template #extra>
          <span>㎡</span>
        </template>
        </van-field>
        <van-cell @click="huxing(1)">
          户型
        <template #extra>
          <span>
            请选择
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            />
            <!-- @change="onChange" -->
      </van-popup>
      <van-cell @click="huxing(2)">所在楼层
        <template #extra>
          <span>
            请选择
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>

      <van-cell @click="huxing(3)">朝向
        <template #extra>
          <span>
            请选择
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>
        <div class="list-header color">房屋标题</div>
        <van-field
          placeholder="请输入标题（例如：整租 小区名 2室 5000元"
          />
        <div class="am-list Add_pics__2r1Id" data-role="rent-list">
          <div class="am-list-header">房屋图像</div>
          <div class="am-list-body">
            <div class="am-image-picker Add_imgpicker__2WCKl">
              <div class="am-image-picker-list" role="group">
                <div class="am-flexbox am-flexbox-align-center">
                  <div class="am-flexbox-item">
                    <div
                      class="am-image-picker-item am-image-picker-upload-btn"
                      role="button"
                      aria-label="Choose and add image"
                    >
                      <input type="file" accept="image/*" multiple="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 上传图片 -->
        <van-uploader class="van-uploader" :after-read="afterRead" />
        <div class="list-header color">房屋配置</div>
        <van-grid class="van-grid" :column-num="5" @click="bianse">
          <van-grid-item icon="orders-o" text="衣柜" />
          <van-grid-item icon="like-o" text="洗衣机" />
          <van-grid-item icon="coupon-o" text="空调" />
          <van-grid-item icon="fire-o" text="天然气" />
          <van-grid-item icon="shop-o" text="冰箱" />
          <van-grid-item icon="hotel-o" text="暖气" />
          <van-grid-item icon="cashier-o" text="电视" />
          <van-grid-item icon="star-o" text="热水器" />
          <van-grid-item icon="bar-chart-o" text="宽带" />
          <van-grid-item icon="desktop-o" text="沙发" />
        </van-grid>
        <div class="list-header color">房屋描述</div>
        <van-field
         class="miaoshu"
          placeholder="输入房屋描述信息"
          type="textarea"
          rows="5"
        />
      </van-cell-group>
      <div class="button">
        <van-button class="qu">取消</van-button>
        <van-button class="ti" type="primary">提交</van-button>
      </div>
    </div>
    <!-- 去出租出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { fabuHouse } from '@/api/other'
export default {
  data () {
    return {
      show: false,
      columns: [],
      peizhifangwu: {}
    }
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    async huxing (num) {
      const { body } = await fabuHouse()
      // console.log(res)
      if (num === 1) {
        this.columns = body.roomType.map(item => item.label)
      } else if (num === 2) {
        this.columns = body.floor.map(item => item.label)
      } else {
        this.columns = body.oriented.map(item => item.label)
      }
      this.peizhifangwu = body
      this.show = true
    },
    onConfirm (value, index) {
      console.log(value, index)
    },
    onCancel () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.my-div {
  background-color: #f6f5f6;
.list {
  .list-header {
    padding: 15px 15px 10px;
    color: #21b97a;
    font-size: 15px;
    width: 100%;
    border-bottom: 1px solid #ddd;
  }
  .color {
    color: #333;
  }
  .miaoshu {
    margin-bottom: 20px;
  }
    .qu{
      width: 49%;
      position: fixed;
      bottom: 0;
    }
    .ti{
      width: 49%;
      margin-left: 2%;
      position: fixed;
      bottom: 0;
      right: 0;
    }
  .van-uploader {
    margin-top: 10px;
    margin-left: 10px;
  }
  .van-grid {
    margin-bottom: 20px;
  }
}
}
</style>
